<template>
  <e-panel>
    <template #top>
      <e-search ref="queryRef" v-model:model-value="queryData" :instance="Model" :load-data="loadData" />
    </template>
    <e-table ref="tableRef" :instance="Model" :query-data="queryData" @show-form="showForm">
      <template ##enableFlag="row">
        <n-tag :type="row.enableFlag ? 'success' : 'warning'" :bordered="false">{{ row.enableFlag_dict }}</n-tag>
      </template>
    </e-table>
    <template #bottom>
      <e-form ref="formRef" v-model:model-value="formData" :instance="Model" @success="loadData()" />
    </template>
  </e-panel>
</template>

<script lang="ts" setup>
  import Model from './model'
  import { usePanel } from '@/components/ext'

  defineOptions({
    name: 'MbModelList'
  })

  const { tableRef, formRef, queryRef, formData, queryData, loadData, showForm } = usePanel()
</script>

<style scoped></style>
